<template>
    <div class="text" :class="{ textfocus: isfocus, textblur: !isfocus }">
        <textarea 
            maxlength="120"
            :value="text"
            @focus="getfocus"
            @blur="blurfocus"
            @input="updateText">
        </textarea>
    </div>
</template>

<script>
import store from '../../store'

export default {
    data() {
        return {
            isfocus: false,
            questionId: this.$route.query.index
        }
    },
    methods: {
        getfocus(){
            this.isfocus = true
        },
        blurfocus(){
            this.isfocus = false
        },
        updateText(e){
            store.commit('updateTotalRemark', {
                value: e.target.value,
                id: this.questionId
            })
        }
    },
    computed: {
        text(){
            return store.state.question[this.questionId].totalRemark
        }
    }
}
</script>

<style scoped>
textarea{  
	border: none;
}

.text{
    width: 100%;
    min-width: 600px;
    min-height: 55px;
    padding: 5px 100px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

.text > textarea{
    display: block;
    position: relative;
    width: 90%;
    margin: 0 auto;
    padding: 10px 10px;
    border: 1px solid transparent;
    font-size: .9rem;
    resize: none;
}

.textfocus{
    background-color: #fafafa;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

.textblur{
    background-color: #fff;
}

.text:hover{
    background-color: #fafafa;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

.text > textarea:focus{
    background-color: transparent;
}

.text:hover > textarea{
    background-color: #fff;

}

.text:hover > textarea:not(:focus){
    border: 1px solid #e0e0e0;
}
</style>